<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历 - Xbox风格</title>
    <link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --main-color: #107c10;
            --dark-bg: #111111;
            --light-text: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

        body {
            background-color: var(--dark-bg);
            color: var(--light-text);
            line-height: 1.6;
        }

        .navbar {
            background-color: rgba(17, 17, 17, 0.95);
            padding: 1rem 2rem;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            backdrop-filter: blur(10px);
        }

        .nav-links {
            display: flex;
            justify-content: flex-end;
            list-style: none;
        }

        .nav-links a {
            color: var(--light-text);
            text-decoration: none;
            padding: 0 1.5rem;
            font-weight: 600;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: var(--main-color);
        }

        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding-top: 60px;
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://example.com/gaming-bg.jpg');
            background-size: cover;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: 1.5rem;
            color: #888;
        }

        .content-section {
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-title {
            color: var(--main-color);
            font-size: 2.5rem;
            margin-bottom: 2rem;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .card {
            background: rgba(255, 255, 255, 0.05);
            padding: 2rem;
            border-radius: 8px;
            transition: transform 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .button {
            display: inline-block;
            background-color: var(--main-color);
            color: white;
            padding: 12px 24px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 1rem;
            transition: background-color 0.3s;
        }

        .button:hover {
            background-color: #0e6a0e;
        }

        @media (max-width: 768px) {
            .nav-links {
                justify-content: center;
                flex-wrap: wrap;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .grid-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<!-- 修改后的hero部分 -->
<section class="hero">
    <div class="profile-header">
        <h1>黎俊</h1>
        <p>全栈开发工程师 | 游戏开发者</p>
        
        <!-- 新增图片容器 -->
        <div class="resume-photo">
            <img src="kl.webp" 
                 alt="职业证件照" 
                 class="professional-img">
        </div>

        <a href="#contact" class="button">联系我</a>
    </div>
</section>

<style>
/* 新增证件照样式 */
.resume-photo {
    width: 180px;   /* 2寸电子版尺寸 */
    height: 240px;  /* 3:4标准比例 */
    margin: 1.5rem auto;
    border: 3px solid var(--main-color);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 20px rgba(16, 124, 16, 0.3); /* Xbox风格光效 */
}

.professional-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 智能裁剪 */
    object-position: top; /* 优先显示面部 */
    transition: transform 0.3s ease;
}

/* 悬停动画 */
.resume-photo:hover .professional-img {
    transform: scale(1.05);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .resume-photo {
        width: 120px;
        height: 160px; /* 保持3:4比例 */
        border-width: 2px;
    }
}

/* 打印尺寸保障 */
@media print {
    .resume-photo {
        width: 35mm !important;  /* 2寸实际尺寸 */
        height: 49mm !important;
        border: none !important;
    }
}
</style>



<body>
    <nav class="navbar">
        <ul class="nav-links">
            <li><a href="#about">关于</a></li>
            <li><a href="#experience">经历</a></li>
            <li><a href="#skills">技能</a></li>
            <li><a href="#projects">项目</a></li>
        </ul>
    </nav>

    

    <section id="about" class="content-section">
        <h2 class="section-title">关于我</h2>
        <div class="grid-container">
            <div class="card">
                <h3><i class="fas fa-code"></i> 技术背景</h3>
                <p>5年全栈开发经验，精通JavaScript生态系统，熟悉云原生架构...</p>
            </div>
            <div class="card">
                <h3><i class="fas fa-gamepad"></i> 游戏开发</h3>
                <p>Unity和Unreal引擎开发经验，参与3款上线游戏的开发工作...</p>
            </div>
        </div>
    </section>

    <section id="experience" class="content-section">
        <h2 class="section-title">工作经历</h2>
        <div class="grid-container">
            <div class="card">
                <h3>微软（2020-至今）</h3>
                <p>高级全栈工程师，负责Xbox云游戏后台开发...</p>
            </div>
            <div class="card">
                <h3>腾讯游戏（2018-2020）</h3>
                <p>游戏客户端开发，参与《王者荣耀》新功能开发...</p>
            </div>
        </div>
    </section>

    <section id="skills" class="content-section">
        <h2 class="section-title">技术栈</h2>
        <div class="grid-container">
            <div class="card">
                <h3><i class="fab fa-js"></i> 前端</h3>
                <p>React/Vue/TypeScript/Three.js</p>
            </div>
            <div class="card">
                <h3><i class="fas fa-server"></i> 后端</h3>
                <p>Node.js/.NET Core/Docker/K8s</p>
            </div>
        </div>
    </section>
</body>
</html>